<template>
<VBtn
    icon="tabler-arrow-left"
    variant="text"
    color="primary"
    @click="router.back()"
  />
  <section>
    <v-skeleton-loader
          class="mx-auto border"
          style="display: block;"
          type="image, article,table"
          :loading="loading"
        >
        <VRow v-if="taskInfo">
            <VCol
            cols="12"
            >
            <VCard>
                <VCardItem
                :title="taskInfo?.title"
                class="pb-6"
                >
                <!-- <template #subtitle>
                    <div class="text-body-1">
                    Prof. <span class="text-h6 d-inline-block">{{ courseDetails?.instructor }}</span>
                    </div>
                </template> -->
                <template #append>
                    <div class="d-flex gap-4 align-center">
                    <VChip
                        variant="tonal"
                        color="error"
                        size="small"
                    >
                        {{ALL_TASK_STATUS[taskInfo?.status]}}
                    </VChip>
                    <VIcon
                        size="24"
                        class="cursor-pointer"
                        icon="tabler-share"
                    />
                    <VIcon
                        size="24"
                        class="cursor-pointer"
                        icon="tabler-bookmarks"
                    />
                    </div>
                </template>
                </VCardItem>
                <VCardText>
                <VCard
                    flat
                    border
                >
                    <div class="px-2 pt-2">
                    <VRow v-viewer>
                        <VCol
                        cols="12"
                        md="4"
                        v-for="(item, index) in taskInfo?.image"
                        >
                        <VImg :src="item" />
                        </VCol>
                    </VRow>
                    </div>
                    <VCardText>

                    <h5 class="text-h5 mb-4">
                        任务需求
                    </h5>
                    <!-- eslint-disable-next-line vue/no-v-html -->
                    <div v-html="taskInfo?.description" />

                    <VDivider class="my-6" />

                    <h5 class="text-h5 mb-4">
                        价格
                    </h5>
                    <div class="d-flex align-center gap-x-4">
                        <h6 class="text-h6 mb-1">
                            {{ taskInfo?.price }} 元
                        </h6>
                    </div>
                    </VCardText>
                </VCard>
                </VCardText>
            </VCard>
            </VCol>
        </VRow>
        </v-skeleton-loader>
        <submitDelivery v-if="isTaker" :task-id="taskInfo?.id"/>
        <checkDelivery v-else-if="isPublisher" :task-id="taskInfo?.id"/>
</section>

<section v-if="!loading&&!taskInfo">
      <v-empty-state
        action-text="返回"
        icon="tabler-search"
        text="您的连接或我们的服务器可能存在问题。请检查您的互联网连接或稍后重试。感谢您的耐心等待。"
        headline="出了点问题"
        title="请稍后重新尝试"
        @click:action="router.back()"
      ></v-empty-state>
  </section>
</template>


<script setup lang="ts">
import { getTask} from '@/api/task'
import { useRoute,useRouter } from "vue-router";
import { ALL_TASK_STATUS } from '@/api/task';
import { computed } from 'vue';
import submitDelivery from '../components/submitDelivery.vue'
import checkDelivery from '../components/checkDelivery.vue';

const tenantId = localStorage.getItem('tenantId')

const isTaker = computed(()=>{
    if (!taskInfo.value) return false
  return taskInfo.value.taker === tenantId
})

const isPublisher = computed(()=>{
    if (!taskInfo.value) return false
  return taskInfo.value.tenantId === tenantId
})



const route = useRoute();
const router = useRouter()

const loading = ref(false)

const taskId = computed({
  get: () => route.params.id,
  set: () => route.params.id,
})

const taskInfo = ref()

const getTaskInfo = async() => {
    loading.value = true
    const res =await getTask(taskId.value).finally(() => loading.value = false)
    taskInfo.value = res.data
}

getTaskInfo()

const step = ref(1)

</script>

<style lang="scss" scoped>
  .drop-zone {
    border: 2px dashed rgba(var(--v-theme-on-surface), 0.12);
    border-radius: 6px;
  }
</style>

<style lang="scss" scoped>
.course-content {
  position: sticky;
  inset-block: 4rem 0;
}

.card-list {
  --v-card-list-gap: 16px;
}
</style>

<style lang="scss">
@use "@layouts/styles/mixins" as layoutsMixins;

body .v-layout .v-application__wrap {
  .course-content {
    .v-expansion-panels {
      border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
      border-radius: 6px;

      .v-expansion-panel {
        &--active {
          .v-expansion-panel-title--active {
            border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));

            .v-expansion-panel-title__overlay {
              opacity: var(--v-hover-opacity) !important;
            }
          }
        }

        .v-expansion-panel-title {
          .v-expansion-panel-title__overlay {
            background-color: rgba(var(--v-theme-on-surface));
            opacity: var(--v-hover-opacity) !important;
          }

          &:hover {
            .v-expansion-panel-title__overlay {
              opacity: var(--v-hover-opacity) !important;
            }
          }

          &__icon {
            .v-icon {
              block-size: 1.5rem !important;
              color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
              font-size: 1.5rem !important;
              inline-size: 1.5rem !important;

              @include layoutsMixins.rtl {
                transform: scaleX(-1);
              }
            }
          }
        }

        .v-expansion-panel-text {
          &__wrapper {
            padding-block: 1rem;
            padding-inline: 0.75rem;
          }
        }
      }
    }
  }

  .card-list {
    .v-list-item__prepend {
      .v-list-item__spacer {
        inline-size: 8px !important;
      }
    }
  }
}
</style>
